<script src="__ADMIN_JS__/core/jquery.min.js"></script>

<div class="col-md-7 col-xs-12">
    <div class="block block-bordered">
        <div class="block-content border-bottom">
            <form action="{:url('mill/stat/ajaxOrderStatus')}" data-charts="stat_index" class="form-horizontal row">
                <input type="hidden" name="series_type" value="line">
                <input type="hidden" name="series_name" value="订单阶段">
                <div class="col-md-4 col-xs-12 push1">
                    <div class="input-group" style="vertical-align: middle;height: 34px;">
                        <span class="input-group-addon" style="background-color: #fff;border-color: #fff;font-size: 18px;">订单阶段统计
                            (<a class="date stat-pointer" data-values="year">本年</a>|<a class="date stat-pointer" data-values="month">本月</a>)
                            <input type="hidden" name="date" value="year">
                        </span>
                    </div>
                </div>
                <div class="col-md-5 col-xs-12 push1">
                    <div class="input-group">
                        <span class="input-group-addon"></span>
                        <input class="js-daterangepicker form-control" type="text" id="search_time" name="time" value="" placeholder="日期">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
                    <div class="form-group">
                        <div class="col-md-12">
                            <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="block-content">
            <div class="charts" id="stat_index"></div>
        </div>
    </div>

</div>
<div class="col-md-5 col-xs-12">
    <div class="block block-bordered">
        <div class="block-content border-bottom">
            <form action="{:url('mill/stat/ajaxOrderStatus')}" data-charts="stat_day" class="form-horizontal row">
                <input type="hidden" name="series_type" value="bar">
                <input type="hidden" name="series_name" value="">
                <div class="col-md-4 col-xs-12 push1">
                    <div class="input-group" style="vertical-align: middle;height: 34px;">
                        <span class="input-group-addon" style="background-color: #fff;border-color: #fff;font-size: 18px;">订单阶段统计
                            (<a class="date stat-pointer" data-values="day">本日</a>)
                            <input type="hidden" name="date" value="day">
                        </span>
                    </div>
                </div>
                <div class="col-md-5 col-xs-12 push1">
                    <div class="input-group">
                        <span class="input-group-addon"></span>
                        <input class="js-daterangepicker form-control" type="text" name="time" value="" placeholder="日期">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
                    <div class="form-group">
                        <div class="col-md-12">
                            <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="block-content">
            <div class="charts" id="stat_day"></div>
        </div>
    </div>

</div>

<div class="col-md-12">
    <div class="block-bordered">
        <div class="stat-bordered">
            <div class="col-md-3 col-xs-12 push1 stat stat-kh">
                <h2 class="stat-title kh">---</h2>
                <p class="stat-content">所有客户统计</p>
            </div>
            <div class="col-md-3 col-xs-12 push1 stat stat-dd">
                <h2 class="stat-title dd">---</h2>
                <p class="stat-content">所有订单统计</p>
            </div>
            <div class="col-md-3 col-xs-12 push1 stat stat-je">
                <h2 class="stat-title je">---</h2>
                <p class="stat-content">销售额统计</p>
            </div>
            <div class="col-md-3 col-xs-12 push1 stat stat-xs stat-pointer" onclick="window.location.href='{:url('mill/index/add')}'">
                <h2 class="stat-title xs">销售部</h2>
                <p class="stat-content">添加客户</p>
            </div>
        </div>
    </div>

</div>

<div class="col-md-5 col-xs-12">
    <div class="block block-bordered">
        <div class="block-content border-bottom">
            <form action="{:url('mill/stat/ajaxClient')}" data-charts="stat_client" class="form-horizontal row">
                <input type="hidden" name="series_type" value="pie">
                <div class="col-md-4 col-xs-12 push1">
                    <div class="input-group" style="vertical-align: middle;height: 34px;">
                        <span class="input-group-addon" style="background-color: #fff;border-color: #fff;font-size: 18px;">客户年度统计
                        </span>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" style="display: none">
                    <div class="form-group">
                        <div class="col-md-12">
                            <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="block-content">
            <div class="charts" id="stat_client"></div>
        </div>
    </div>

</div>
<div class="col-md-7 col-xs-12">
    <div class="block block-bordered">
        <div class="block-content border-bottom">
            <form action="{:url('mill/stat/ajaxOrderJe')}" data-charts="stat_je" class="form-horizontal row">
                <input type="hidden" name="series_type" value="bar">
                <input type="hidden" name="series_name" value="">
                <div class="col-md-4 col-xs-12 push1">
                    <div class="input-group" style="vertical-align: middle;height: 34px;">
                        <span class="input-group-addon" style="background-color: #fff;border-color: #fff;font-size: 18px;">发货数据统计
                            (<a class="date stat-pointer" data-values="year">本年</a>|<a class="date stat-pointer" data-values="month">本月</a>)
                            <input type="hidden" name="date" value="year">
                        </span>
                    </div>
                </div>
                <div class="col-md-5 col-xs-12 push1">
                    <div class="input-group">
                        <span class="input-group-addon"></span>
                        <input class="js-daterangepicker form-control" type="text" name="time" value="" placeholder="日期">
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
                    <div class="form-group">
                        <div class="col-md-12">
                            <button class="btn btn-sm btn-primary sub" type="button"><i class="fa fa-search"></i> 确认</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="block-content">
            <div class="charts" id="stat_je"></div>
        </div>
    </div>

</div>

<!--统计初始化 JS-->
<script>
    jQuery(function() {

        //初始化时间插件
        App.initHelpers(['daterangepicker']);

        //初始化统计
        var statInit = function () {
            var url = "{:url('mill/stat/ajaxIndex')}";
            var parm = [];
            $.get(url,parm, function(data){
                var data = $.parseJSON(data);

                $('.kh').html(data.kh);
                $('.dd').html(data.dd);
                $('.je').html(data.je);

            });
        };

        statInit();


    });
</script>

<!--echarts统计 JS-->
<script src="__PLUGINS__/DevTeam/static/js/echarts.min.js"></script>
<script>
    jQuery(function() {

        //初始化echarts宽度
        var chartsInit = function () {
            $('.charts').each(function (i,j) {

                var width = $(this).parent('div').outerWidth();
                var height = '260px';
                $(this).width(width-40);
                $(this).height(height);
            })
        };

        //初始化echarts
        var echartsInit = function (id,data) {
            var dom = document.getElementById(id);
            var myChart = echarts.init(dom);

            var legend_data = data.legend_data;
            var series_name = data.series_name;
            var series_type = data.series_type;
            var series_title = data.value_title;
            var series = data.value;

            var option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    //type: 'scroll',
                    orient: 'vertical',
                    left: 'right',
                    top: '40',
                    data: legend_data,

                },
                grid: {
                    left: '1%',
                    top: '4%',
                    right: '16%',
                    bottom: '12%',
                    containLabel: true
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        name: series_name,
                        data: series_title,
                        axisTick: {
                            alignWithLabel: true
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            show: true,
                        },
                    }
                ],
                series: series
            };

            if(series_type == 'pie'){
                delete option.yAxis;
                delete option.xAxis;
                delete option.tooltip.trigger;
            }

            myChart.setOption(option);
            myChart.resize();
        };

        //监听年月日事件
        $(".date").click(function(){
            var date = $(this).attr('data-values');
            $(this).siblings('input[name=date]').val(date);
            $(this).siblings('a').removeClass('date-active');
            $(this).addClass('date-active');

            //清空时间筛选，并重置echarts
            var form = $(this).parents('form');
            form.find('input[name=time]').val("");
            form.find('.sub').click();
        });

        //监听表单
        $(".sub").click(function(){
            var form = $(this).parents('form');
            var url = form.attr('action');
            var charts_id = form.attr('data-charts');
            var parm = form.serialize();
            ajax_sub(charts_id,url,parm,form);
        });

        //请求统计数据，并重置echarts
        function ajax_sub(charts_id,url,parm,form) {
            $.get(url,parm, function(data){
                var data = $.parseJSON(data);

                form.find('input[name=time]').val(data.date);
                echartsInit(charts_id,data);

            });
        }

        //加载统计数据
        var subInit = function () {
            $('.sub').each(function (i,j) {
                $(this).click();
            })
        };

        //加载默认时间筛选项
        var dateInit = function () {
            $('input[name=date]').each(function (i,j) {
                var val = $(this).val();

                $(this).siblings('a').removeClass('date-active');
                $(this).siblings('a[data-values='+val+']').addClass('date-active');
            })
        };

        jQuery(window).on('resize load', function () {
            chartsInit();
            subInit();
            dateInit();
        });

    });
</script>